<template>
	<div class="hcj-pager">
		<div style="display: flex;gap: 5px;">
			<slot>
				<div style="color:  #515151;font-weight: 500;margin-right: 3px">
					共 {{total}} 条
				</div>
			</slot>
			<div @click="last(0)" class="hcj-pager-pre" v-if="currenPager != 1">&lt;</div>
			<div class="hcj-pager-pre-disble" v-if="currenPager == 1">&lt;</div>

			<!-- 分页叶片 -->
			<div class="hcj-pager-number">
				<div class="index_tow">
					<div style="width: 25px;height: 25px;" ref="indexPager" @click="pagerClick(1)">
						{{1}}
					</div>
					<div style="width: 25px;height: 25px;" ref="towPager" @click="pagerClick(2)">
						{{2}}
					</div>
				</div>
				<div class="hcj-pager-numbar-change" ref="hcjPagerNumber">
					<div class="hcj-page-slide" ref="hcjPageCheck" v-for="(k,i) in PageShow" :index="i"
						@click="pagerClick(k+2)">
						{{k+2}}
					</div>
				</div>
			</div>
			<div @click="last(1)" class="hcj-pager-pre" v-if="currenPager != maxPage">&gt;</div>
			<div class="hcj-pager-pre-disble" v-if="currenPager == maxPage">&lt;</div>
			
			<div style="color:  #515151;font-weight: 500;display: flex;gap: 5px;">
				<div>前往</div>
				<input style="width: 30px;height: 24px;;text-align: center;" type="number" min="1" v-model="currenPager"
					@input="handleInput" />
				<div>页</div>
			</div>
			<div style="color:  #515151;font-weight: 500;display: flex;gap: 5px;margin-left: 3px;">
				<div class="hcj-pager-end" v-if="currenPager != maxPage" @click="goto_end()">终页</div>
				<div class="hcj-pager-end" style="color: #e74d00;" v-if="currenPager == maxPage">终页</div>
				<!-- <div>{{maxPage}}</div> -->
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		props: {
			total: { //总数据条目
				type: [String, Number],
				default: 5
			},
			pageSize: { //每页尺寸
				type: [String, Number],
				default: 0
			},
			pageNumber: { //页码显示最大数，超过用省略号显示
				type: Number,
				default: 5
			}
		},
		data() {
			return {
				currenPager: 1, //当前页码，父组件常常使用，用于分页请求后端的参数
				maxPage: 0, //数据可以分成的最大页码 this.total / this.pageSize
				setPageWidth: 0, //设置显示的最大页码,避免直接修改pageNumber
				PageShow: 0,
				// setNumberPagList: [], //设置要显示的页码，最大显示页码-2，因为第一第二页不进入循环
				pagerAdd: 3, //当点击的分页按钮大于5时，setNumberPagList内的值统一加1
				pagerBoxWidth: 0,
				limitBoxWidth: 0,
				pagerClickFlag: 0, //点击标志位，用于与上一次点击比较，判断页码块位移方向
			}
		},
		mounted() {
			// console.log(this.maxPage,")))")

			setTimeout(() => {
				this.maxPage = Math.ceil(this.total / this.pageSize)
				// console.log(this.maxPage)
				this.PageShow = this.maxPage - 2
				// 生成页码判断
				if (this.pageNumber >= this.maxPage) { //最大页码数9页
					this.setPageWidth = this.maxPage - 2
				} else if (this.pageNumber > 9) {
					this.setPageWidth = 9
				} else if (this.maxPage <= 5) { //当数据的最大可以分成页数小于5时，直接生成所有页码
					this.setPageWidth = this.maxPage - 2
				} else {
					this.setPageWidth = this.pageNumber - 2
				}

				// 初设选中默认背景
				this.$refs.indexPager.style.backgroundColor = "#2c3e50"
				this.$refs.indexPager.style.color = "#fffFFf"

				this.limitBoxWidth = ((this.setPageWidth) * 25) + (this.setPageWidth - 1) * 3; //生成页码按钮的限制宽度
				this.pagerBoxWidth = ((this.maxPage - 2) * 25) + (this.maxPage - 1) * 3; //生成页码按钮的实际宽度
				this.$refs.hcjPagerNumber.style.setProperty('--anim-width', this.limitBoxWidth + 'px');
				if (this.pageNumber <= 2 && this.maxPage > 2) {
					this.$refs.hcjPagerNumber.style.setProperty('--anim-width', 50 + 'px');
				}
			}, 300)

		},
		watch: {
			currenPager(n, o) {
				// console.log(n,o)
				if (n >= 5 && n > o) {
					this.$refs.towPager.innerHTML = "..."
					// this.pagerAdd++
					let moveCount = ((this.maxPage - 2) / 2) - 1
					// console.log(moveCount)
					// console.log("##", "+")
					// console.log(this.$refs.hcjPagerNumber)
					// this.$refs.hcjPageCheck.style.transform = `translateX(-${25}px)`;
					this.$refs.hcjPagerNumber.scrollLeft += 28;
				} else if (n < 5) {
					this.$refs.towPager.innerHTML = 2
					this.$refs.hcjPagerNumber.scrollLeft = 0;
				} else {
					// console.log("##", "-")
					this.$refs.hcjPagerNumber.scrollLeft -= 28;
					// this.pagerAdd--
				}
			}
		},
		methods: {
			// 点击上一页，下一页
			last(num) {
				if (num == 0) {
					if (this.currenPager > 1) {
						this.currenPager--;
						this.$emit('handle', {
							currentPager: this.currenPager - 1,
							pageSize: this.pageSize,
							total: this.total
						}); //返回当前页和页面尺寸
					}
				} else {
					if (this.currenPager < this.maxPage) {
						this.currenPager++;
						this.$emit('handle', {
							currentPager: this.currenPager - 1,
							pageSize: this.pageSize,
							total: this.total
						}); //返回当前页和页面尺寸
					} else {
						this.currenPager = this.maxPage;
					}
				}
				// 分页按钮选中改变样式
				this.setStyle()
			},
			// 点击分页按钮
			pagerClick(i) {
				if (i != 0) {
					this.currenPager = i; //改变当前页
				}
				this.$emit('handle', {
					currentPager: this.currenPager - 1,
					pageSize: this.pageSize,
					total: this.total
				}); //返回当前页和页面尺寸
				// 分页按钮选中改变样式
				this.setStyle()
			},
			// 前往多少页
			handleInput(e) {
				let value = parseInt(e.target.value, 10);
				if (isNaN(value) || value <= 0) {
					this.currenPager = 1; // 默认最小值为 1
				} else {
					if (value < this.maxPage) {
						this.currenPager = value;
					} else {
						this.currenPager = this.maxPage;
					}
				}
				this.$emit('handle', {
					currentPager: this.currenPager - 1,
					pageSize: this.pageSize,
					total: this.total
				}); //返回当前页和页面尺寸
				// 分页按钮选中改变样式
				this.setStyle()
			},
			// 设置分页数字按钮颜色
			setStyle() {
				// 当点击的按钮大于5时，移动按钮

				// 清空分页按钮选中样式
				// console.log(this.currenPager, "@@@")
				try {
					for (let index of this.$refs.hcjPageCheck) {
						index.style.backgroundColor = ""
						index.style.color = ""
					}
				} catch (err) {
					console.log(err)
				}
				if (this.currenPager == 1) { //第一第二个分页按钮不是循环内生成，需单独设置
					this.$refs.indexPager.style.backgroundColor = "#2c3e50"
					this.$refs.indexPager.style.color = "#fffFFf"
					this.$refs.towPager.style.backgroundColor = ""
					this.$refs.towPager.style.color = ""
				} else if (this.currenPager == 2) {
					// 第一第二
					this.$refs.indexPager.style.backgroundColor = ""
					this.$refs.indexPager.style.color = ""
					this.$refs.towPager.style.backgroundColor = "#2c3e50"
					this.$refs.towPager.style.color = "#fffFFf"
				} else if (this.currenPager > 2) {
					// 第一第二
					this.$refs.indexPager.style.backgroundColor = ""
					this.$refs.indexPager.style.color = ""
					this.$refs.towPager.style.backgroundColor = ""
					this.$refs.towPager.style.color = ""

					this.$refs.hcjPageCheck[this.currenPager - 3].style.backgroundColor = "#2c3e50"
					this.$refs.hcjPageCheck[this.currenPager - 3].style.color = "#fffFFf"
				}

			},

			// 前往最后一页
			goto_end() {
				this.currenPager = this.maxPage;
				this.$emit('handle', {
					currentPager: this.currenPager - 1,
					pageSize: this.pageSize,
					total: this.total
				}); //返回当前页和页面尺寸
				
				// 更新样式
				this.$refs.hcjPagerNumber.scrollLeft = this.maxPage * 25; 
				this.setStyle()
			}
		}
	}
</script>

<style scoped>
	.hcj-pager {
		display: inline-block;
		width: auto;
	}

	.hcj-pager-pre {
		color: #686868;
		font-size: 18px;
		cursor: pointer;
		width: 25px;
		height: 25px;
		text-align: center;
		line-height: 25px;
		transition: all 0.2s;
		border-radius: 3px;
		user-select: none;
	}

	.hcj-pager-pre:hover {
		color: white;
		background-color: #2c3e50;
	}

	.hcj-pager-end {
		cursor: pointer;
	}

	.hcj-pager-end:hover {
		color: #e74d00;

	}

	.hcj-pager-number {
		display: flex;
		justify-content: center;
		align-items: center;
		/* background-color: red; */
		text-align: center;
		/* width: 200px; */
		overflow: hidden;
		overflow-x: auto;
		overflow-y: hidden;
		scroll-snap-type: x mandatory;
		-webkit-overflow-scrolling: touch;
	}

	.hcj-page-slide {
		scroll-snap-align: start;
		/* min-width: 100%; */
	}

	.index_tow {
		display: flex;
		gap: 3px;
	}

	.index_tow>* {
		border-radius: 3px;
	}

	.index_tow>*:hover {
		background-color: #2c3e50;
		color: white;
	}

	.hcj-pager-numbar-change {
		margin-left: 3px;
		/* background-color: red; */
		/* gap: 3px; */
		/* width: var(--anim-width); */
		white-space: nowrap;
		overflow: hidden;
		animation: anime 0.6s forwards;
	}

	.hcj-pager-numbar-change>* {
		display: inline-block;
		margin-right: 3px;
		width: 25px;
		height: 25px;
		border-radius: 3px;
	}

	.hcj-pager-numbar-change>*:hover {
		background-color: #2c3e50;
		color: white;
	}

/* 前进后退图标控制 */
.hcj-pager-pre-disble {
	color: transparent;
	font-size: 18px;
	cursor: pointer;
	width: 25px;
	height: 25px;
	text-align: center;
	line-height: 25px;
	transition: all 0.2s;
	border-radius: 3px;
	user-select: none;
}
	@keyframes anime {
		0% {
			width: 0;
		}

		100% {
			width: var(--anim-width);
		}
	}
</style>